<template>
  <div class="app-container" v-loading="pageLoading">
    <el-button type="primary" class="fr" @click="createItem">创建</el-button>
    <div class="filter-container">
      <el-input style="width: 260px;" placeholder="输入备件编码按回车" clearable class="filter-item"
        @keyup.enter.native="research" @clear="research" v-model="query.item_no">
      </el-input>
      <el-button class="filter-item" type="success" plain @click="research">查询</el-button>
      <el-button class="filter-item" type="info" plain @click="exportData" :loading="exportLoading">导出 </el-button>
    </div>
    <z-table :list="list" :tableProps="tableProps" :columns="columns" @editItem="editItem" @deleteItem="deleteItem">
      <template v-slot:content="v">
        <span v-if="v.key=='status'" class="text-label" :style="{background:statusColor[v.row[v.key]-1]}">
          {{getMatchingData(v.row[v.key],'status')}}
        </span>
        <span v-else-if="v.key=='audit_result'">
          {{v.row[v.key]== 'Y'?'通过':v.row[v.key]== 'N'?'不通过':''}}
        </span>
      </template>
      <template v-slot:operation="v">
        <a href="javascript:;" class="text-blue" @click="Adult(v.row)" v-if="v.row['status'] ==2">审核</a>
        <a href="javascript:;" class="text-blue" @click="editItem(v.row)">编辑</a>
        <a style="margin-left:5px;" href="javascript:;" class="text-red" @click="deleteItem(v.row)">删除</a>
      </template>
    </z-table>
    <z-pagination :pagination="pagination" :total="total" :page.sync="query.page" :limit.sync="query.size"
      @change="getList"></z-pagination>
    <z-form-dialog :name="name" :data="data" :formProps="formProps" :fields="fields" @submit="submit"
      :submitLoading="submitLoading" :visible.sync="editFormVisible" :before-close="beforeClose">
      <template v-slot:footer>
        <el-button @click="beforeClose">取消</el-button>
        <el-button type="warning" @click.native="submit(0)" v-if="!auditShow" :loading="submitLoading">保存
        </el-button>
        <el-button type="primary" @click.native="submit(1)" :loading="submitLoading">确认
        </el-button>
      </template>
    </z-form-dialog>

  </div>
</template>

<script>
import commonMixin from '@/views/_common/mixin'
export default {
  name: 'issueApplication',
  mixins: [commonMixin],
  components: {},
  props: {},
  data() {
    return {
      query: {
        item_no: '',
        page: 1,
        size: 10,
      },
      name: '出库申请单',
      tableProps: {
        border: true,
        opsColWith: 140,
        fixed: false,
        hideOperations: false,
      },
      postForList: true,
      api: this.$api.TpmPartReceive,
      baseUrl: this.$api.baseUrl,
      statusData: [
        { label: '申请中', value: 1 },
        { label: '待审核', value: 2 },
        { label: '已完成', value: 3 },
      ],
      statusColor: ['#e6a23c', '#409eff', '#67c23a'],
      columns: [
        { title: '出库申请单号', key: 'order_number', width: 120 },
        { title: '备件料号', key: 'item_no', width: 100 },
        { title: '数量', key: 'qty', width: 100 },
        { title: '申请人', key: 'applicant', width: 100 },
        { title: '申请时间', key: 'date', width: 140 },
        { title: '申请说明', key: 'reason' },
        { title: '审核人', key: 'audit', width: 100 },
        { title: '审核结果', key: 'audit_result', width: 100 },
        { title: '审核说明', key: 'remarks' },
        { title: '审核日期', key: 'audit_time', width: 140 },
        { title: '状态', key: 'status', width: 100 },
      ],
      fields: [
        { title: '备件料号', key: 'item_no', span: 12, required: true },
        {
          title: '数量',
          key: 'qty',
          span: 12,
          name: 'number',
          required: true,
          props: {
            min: 0,
          },
        },
        {
          title: '审批人',
          key: 'audit',
          span: 12,
          name: 'select',
          options: [],
          required: true,
          props: { filterable: true, remote: true, clearable: true, 'remote-method': this.getpersonnel },
        },
        { title: '申请说明', key: 'reason', span: 24, name: 'textarea' },
      ],
      statusData: [
        { label: '申请中', value: 1 },
        { label: '待审核', value: 2 },
        { label: '已审核', value: 3 },
        { label: '已完成', value: 4 },
      ],
      statusColor: ['#e6a23c', '#409eff', '#732e7e', '#67c23a'],
      // 审核
      auditShow: false,
    }
  },
  computed: {},
  watch: {},
  created() {
    this.research()
    this.getpersonnel()
  },
  mounted() {},
  methods: {
    // 获取审批人
    getpersonnel(val) {
      let Params = {
        queryString: val ? val : '',
        page: 1,
        size: 100,
      }
      this.$request(this.baseUrl + 'platform/user/getList', Params).then((r) => {
        const { list } = r
        let options = list.map((i) => ({
          label: `${i.userid} ${i.username}`,
          value: i.userid,
        }))
        this.getFieldConfig('audit').options = options
      })
    },
    // 添加和保存
    submit(type) {
      if (this.auditShow) {
        if (this.data.audit_result == 'N' && !this.data.remarks) {
          return this.$message.warning('审核不通过,请输入原因')
        }
        this.submitLoading = true
        this.$request(this.api + 'TaskAuditConfirm', this.data, 'post')
          .then((r) => {
            this.$message.success('操作成功')
            this.editFormVisible = false
            this.getList()
          })
          .finally(() => {
            this.submitLoading = false
          })
      } else {
        let Data = {}
        if (type) {
          Data = {
            baseData: this.data,
            isSubmit: 'Y',
          }
        } else {
          Data = {
            baseData: this.data,
            isSubmit: 'N',
          }
        }
        this.submitLoading = true
        this.$request(this.api + 'add', Data, 'post')
          .then((r) => {
            this.$message.success('操作成功')
            this.editFormVisible = false
            this.getList()
          })
          .finally(() => {
            this.submitLoading = false
          })
      }
    },
    // 审核
    Adult(v) {
      this.fields = [
        {
          title: '备件料号',
          key: 'item_no',
          span: 12,
          required: true,
          props: {
            disabled: true,
          },
        },
        {
          title: '数量',
          key: 'qty',
          span: 12,
          name: 'number',
          required: true,
          props: {
            min: 0,
            disabled: true,
          },
        },
        {
          title: '审批人',
          key: 'audit',
          span: 12,
          name: 'select',
          options: [],
          required: true,
          props: {
            filterable: true,
            remote: true,
            clearable: true,
            'remote-method': this.getpersonnel,
            disabled: true,
          },
        },
        {
          title: '申请说明',
          key: 'reason',
          span: 24,
          name: 'textarea',
          props: {
            disabled: true,
          },
        },
        {
          title: '审核人审核',
          key: 'audit_result',
          span: 12,
          name: 'select',
          required: true,
          options: [
            { label: '通过', value: 'Y' },
            { label: '不通过', value: 'N' },
          ],
        },
        { title: '审核人意见', key: 'remarks', span: 24, name: 'textarea' },
      ]
      this.formProps.title = '审核中'
      this.auditShow = true
      this.$request(this.api + 'GetById', {
        id: v.id,
      }).then((r) => {
        this.data = r
        this.data.audit_result = 'Y'
        this.editFormVisible = true
      })
    },
    getMatchingData(val, code) {
      if (code == 'status') {
        let tmp = this.statusData.find((i) => i.value == val)
        return tmp ? tmp.label : ''
      }
    },
    beforeClose() {
      this.fields = [
        { title: '备件料号', key: 'item_no', span: 12, required: true },
        {
          title: '数量',
          key: 'qty',
          span: 12,
          name: 'number',
          required: true,
          props: {
            min: 0,
          },
        },
        {
          title: '审批人',
          key: 'audit',
          span: 12,
          name: 'select',
          options: [],
          required: true,
          props: { filterable: true, remote: true, clearable: true, 'remote-method': this.getpersonnel },
        },
        { title: '申请说明', key: 'reason', span: 24, name: 'textarea' },
      ]
      this.formProps.title = ''
      this.auditShow = false
      this.editFormVisible = false
    },
  },
}
</script>

<style lang="less" scoped></style>